import React from 'react';
import { Breadcrumb, Layout, theme } from 'antd';
import {Outlet} from "react-router-dom";
import MainMenu from "@/components/HomeMenu"

const { Header, Content, Footer, Sider } = Layout;

const App: React.FC = () => {
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    return (
        <Layout hasSider>
            {/* 左边侧边栏 */}
            <Sider
                style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: 0, bottom: 0 }}
            >
                {/* 左上logo */}
                <div className="demo-logo-vertical"><span>潘多拉魔盒</span></div>
                {/* 菜单 */}
                <MainMenu />
            </Sider>

            {/* 右边内容 */}
            <Layout style={{ marginLeft: 200 }}>
                {/* 右边头部 */}
                <Header style={{ padding: 0, background: colorBgContainer }}>
                    {/* 面包屑 */}
                    <Breadcrumb style={{ lineHeight:'64px', paddingLeft:'24px' }}>
                        <Breadcrumb.Item>User</Breadcrumb.Item>
                        <Breadcrumb.Item>Bill</Breadcrumb.Item>
                    </Breadcrumb>
                </Header>

                {/* 右边内容部分 */}
                <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
                    <div
                        style={{
                            padding: 24,
                            minHeight: 800,
                            background: colorBgContainer,
                            borderRadius: borderRadiusLG,
                        }}
                    >

                        <Outlet />
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>
                    Ant Design ©{new Date().getFullYear()} Created by Ant UED
                </Footer>
            </Layout>
        </Layout>
    );
};

export default App;